<!--  -->
<template>
  <div class='CourseLearn_container'>
    <div class="CourseLearn">
      <div class="top">
        <span>选择课程</span>
        <div class="course_box">
          <div class="course_item" 
            v-for="(item, index) in courseList" :key="index"
            :class="activeIndex == index ? 'active': '' "
            @click="changeCourse(item, index)"
          >
            <img :src="item.img" alt="">
            <div>
              <span class="title">{{item.name}}</span>
              <span class="number">课时: {{item.section_count}}</span>
            </div>
          </div>
          
        </div>
      </div>
      
      <div class="body">
        <div class="left">


          <div class="section_box" v-for="(item, index) in sectionList" :key="index" >
            <div class="title">
              <span class="bold">章节{{ index+1 }}</span>
              <span>{{item.name}}</span>
            </div>

            <div @click="clickSection(jtem)" :class="activeSection == jtem.id ? 'activeSection' : ''" class="class_item" v-for="(jtem, j) in item.children" :key="j">
              <div><span class="subtitle"> </span>{{ jtem.name }}</div>

              <div v-if="jtem.children" class="third">
                <div 
                  v-for="(k, i) in jtem.children" 
                  :key="k.id" 
                  :class="activeSection == k.id ? 'activeSection' : ''"
                  @click="clickSection(k)"
                >
                  <span class="subtitle"> </span>{{ k.name }}
                </div>
              </div>
            </div>
            
          </div>

          
        </div>
        <div class="video_box">
          <a-button v-if="!loginStatus" type="danger" @click="login" size="large" class="btn_login">登录观看</a-button>
          <!-- <video v-else :src="videoUrl"></video> -->
          
          <video
            v-if="videoUrl"
            ref="video"
            class="video-js vjs-default-skin"
            style="height: 100%"
            controls
          >
            <source :src="videoUrl" type="video/mp4" />
          </video>
        </div>
      </div>

      <span class="copy_right">©2024 北京大学学习科学实验室  版权所有</span>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState} from "vuex";
let { mapMutations, mapActions } = createNamespacedHelpers("adminBasic");
let img1 = require('../assets/img/img1.png')
let img2 = require('../assets/img/img2.png')
let img3 = require('../assets/img/img3.png')


import videojs from 'video.js'
import 'videojs-contrib-hls'

export default {
  name: 'CourseLearn',
  data() {
    return {
      activeIndex: 0,
      activeSection: null,

      sectionList: [
      ],
      courseList: [
      ],

      videoUrl: '',
      // videoUrl: 'http://47.113.180.113/video/10101.mp4',
      loginStatus: false,

      player: null,
    }
  },

  created() {

    if(localStorage.getItem('Authorization')) {
      this.loginStatus = true
    }else {
      this.loginStatus = false
    }

    this.initCourseList();
  },

  mounted() {
    
  },

  methods: {
    ...mapActions(["formGet","post"]),


    clickSection(item) {
      console.log(item)
      if(item.children && item.children.length > 0) {
        return false;
      }
      this.activeSection = item.id
      this.player = null
      this.$axios.get(`/api/v1/resources/section/${item.id}` ).then(res => {
        console.log(res.data.data)
        // if(res.data.data.length > 0) {
          this.videoUrl = `/video/${res.data.data[0].url}`
          let options = {};
          this.$nextTick(() => {
            this.player = videojs(this.$refs.video, options, function onPlayerReady() {
              videojs.log('Your player is ready!');
  
              this.play();
  
              this.on('ended', function() {
                videojs.log('Awww...over so soon?!');
              });
            });
  
            this.player.src(this.videoUrl);
            this.player.load(this.videoUrl); //使video重新加载
            this.player.play();
          })
        // }
        // else {
        //   this.videoUrl = '';
        //   this.player = null
        // }

      }).catch(err => {
        this.$message.error(err);
      })
    },

    changeCourse(item, index) {
      this.activeIndex = index
      this.initSection(item.id)
    },

    initSection(e) {
      this.$axios.get(`/api/v1/sections/course/${e}` ).then(res => {
        this.sectionList = res.data.sections
        this.sectionList.forEach(item => {
          item.title = item.name
          item.key = item.id

          if(item.children && item.children.length > 0) {
            item.children.forEach(j => {
              j.title = j.name
              j.key = j.id
            })
          }
        })

        console.log(this.sectionList[0].children)
        if(this.sectionList[0].children[0].children && this.sectionList[0].children[0].children.length > 0) {
          this.activeSection = this.sectionList[0].children[0].children[0].id
          this.clickSection(this.sectionList[0].children[0].children[0])
        }else {
          this.activeSection = this.sectionList[0].children[0].id
          this.clickSection(this.sectionList[0].children[0])
        }
        // this.videoUrl = this.sectionList[0].children[0]
      }).catch(err => {
        this.$message.error(err);
      })
    },

    initCourseList() {
      this.formGet({
        API: 'CourseList',
        data: {}
      }).then(res => {
        this.courseList = res.data
        this.courseList.forEach((item, index) => {
          if(index == 0) {
            item.img = img1
          }
          if(index == 1) {
            item.img = img2
          }
        })

        
        this.initSection(this.courseList[0].id)
      }).catch(err => {

      })
    },


    login() {
      this.$router.push({
        name: 'Login',
        query: {
          redirect: 'CourseLearn'
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
.CourseLearn_container {
  height: 100%;
  width: 100%;
  .CourseLearn {
    height: calc(100% - 30px);
    // width: 100%;
    margin: 15px;
    padding: 15px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;
    box-shadow: 3px 3px 8px 5px rgba(24, 24, 24, 0.07);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }


  .top {
    display: flex;
    align-items: center;
    &>span {
      display: inline-block;
      width: 40px;;
      font-size: 16px;
      color: rgba(93, 98, 118, 1);
      margin-left: 10px;
    }
    .course_box {
      display: flex;
      margin-left: 10px;
      .course_item {
        display: flex;
        margin-right: 15px;
        cursor: pointer;
        img {
          width: 100px;
        }

        div {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          // margin-left: 5px;
          padding: 4px 10px;
          box-sizing: border-box;

          .title {
            color: rgba(10, 15, 44, 0.65);
            font-size: 16px;;
          }
          .number {
            color: rgba(10, 15, 44, 0.45);
          }
        }
      }

      .active {
        background: rgba(255, 198, 198, 0.3);
        border-radius: 2px;

        .title {
          color: rgba(154, 0, 0, 1) !important;
        }
      }
    }
  }

  .body {
    display: flex;
    height: 100%;
    margin: 20px 0;
    overflow: hidden;
    .left {
      width: 250px;
      border:1px solid rgba(255, 218, 218, 1);
      // border-right: none;
      padding: 10px 8px;
      box-sizing: border-box;
      cursor: pointer;
      overflow-y: auto;

      .section_box {
        margin-bottom: 6px;

        .third {
          padding-left: 15px;;
        }
      }

      .title {
        color: rgba(10, 15, 44, 0.65);
        padding: 4px 8px;
        // background: rgba(255, 122, 122, 0.25);
        border-radius: 3px;
        .bold {
          font-weight: bold;
          color: rgba(10, 15, 44, 0.85);
          margin-right: 10px;
        }
      }
      .class_item {
        // padding-left: 20px;
        .subtitle{
          color: rgba(10, 15, 44, 0.65);
        }
        padding: 6px 20px 6px 20px;
        color: rgba(10, 15, 44, 0.45);
      }

      .activeSection {
        color: rgba(154, 0, 0, 1) !important;
        .subtitle {
          color: rgba(154, 0, 0, 1) !important;

        }
      }

      .active {
        color: rgba(154, 0, 0, 1);
        .subtitle{
          color: rgba(154, 0, 0, 1);
        }
      }
    }

    .video_box {
      // flex: 1;
      width: calc(100% - 250px);
      background: #000;
      // background: url('../assets/img/video.png') 50% 50% no-repeat;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;

      video {
        height: 100%;
      }

      .btn_login {
        width: 100px;
        border: rgba(255, 119, 119, 1);
        color: #fff;
        background: linear-gradient(135deg,rgba(198, 23, 23, 1), rgba(255, 119, 119, 1), );
      }
      img {
        width: 100%;
        // height: 100%;
      }
    }
  }

  
  .copy_right {
    color: #b3b3b3;
  }
}
</style>